<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>骨医快线</title>
	<link rel="stylesheet" href="../../css/mui.plus.css" />
	<link rel="stylesheet" href="../../css/photoswipe.css"/>
	<link rel="stylesheet" href="../../css/default-skin/default-skin.css" />
	<style>
		.mui-grid-view.mui-grid-9 .mui-table-view-cell,.mui-grid-view.mui-grid-9 {
        	border: none;
        } 
        .oe-img-add {
        	width: 20vw;
        	height: 20vw;
        }
        .pswp__button.pswp__button--delete {
        	background: none;
        	color: #fff;
        }
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">照片列表</h1>
	</header>
	
	<div class="mui-content">
		<ul id="imgList" class="mui-table-view mui-grid-view mui-grid-9" style="background-color: #fff;">
			
	        <!--<li class="mui-table-view-cell mui-media mui-col-xs-4">
	            <a href="###">
	                <img class="oe-img-add"></img>
	            </a>
	        </li>
	        <li class="mui-table-view-cell mui-media mui-col-xs-4">
	            <a href="###">
	                <img class="oe-img-add"></img>
	            </a>
	        </li>-->
	    </ul>
	    <ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: #fff;">
			
	        <li class="mui-table-view-cell mui-media mui-col-xs-4">
	            <a href="###" id="qn1">
	                <img id="qnImg1" class="oe-img-add"></img>
	            </a>
            	<span id="qnTxt1" style="font-size: 12px;"></span>
	        </li>
	    </ul>
	</div>
	
	<!-- Root element of PhotoSwipe. Must have class pswp. -->
	<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	
	    <!-- Background of PhotoSwipe. 
	         It's a separate element, as animating opacity is faster than rgba(). -->
	    <div class="pswp__bg"></div>
	
	    <!-- Slides wrapper with overflow:hidden. -->
	    <div class="pswp__scroll-wrap">
	
	        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
	        <div class="pswp__container">
	            <!-- don't modify these 3 pswp__item elements, data is added later on -->
	            <div class="pswp__item"></div>
	            <div class="pswp__item"></div>
	            <div class="pswp__item"></div>
	        </div>
	
	        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
	        <div class="pswp__ui pswp__ui--hidden">
	
	            <div class="pswp__top-bar">
	
	                <!--  Controls are self-explanatory. Order can be changed. -->
	
	                <div class="pswp__counter"></div>
	
	                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
	                <button class="pswp__button pswp__button--delete">删除</button>
	
	                <!-- <button class="pswp__button pswp__button--share" title="Share"></button> -->
	
	                <!-- <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> -->
	
	                <!-- <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> -->
	
	                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
	                <!-- element will get class pswp__preloader--active when preloader is running -->
	                <div class="pswp__preloader">
	                    <div class="pswp__preloader__icn">
	                      <div class="pswp__preloader__cut">
	                        <div class="pswp__preloader__donut"></div>
	                      </div>
	                    </div>
	                </div>
	            </div>
	
	            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
	                <div class="pswp__share-tooltip"></div> 
	            </div>
	
	            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
	            </button>
	
	            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
	            </button>
	
	            <div class="pswp__caption">
	                <div class="pswp__caption__center"></div>
	            </div>
	
	          </div>
	
	        </div>
	
	</div>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/lib/template.js"></script>
	<script src="../../js/lib/moxie.js"></script>
    <script src="../../js/lib/plupload.dev.js"></script>
	<script src="../../js/lib/qiniu.min.js"></script>
	<script src="../../js/lib/photoswipe.min.js"></script>
	<script src="../../js/lib/photoswipe-ui-default.min.js"></script>
	<script id="photo-list" type="text/html">
		<!--<li class="mui-table-view-cell mui-media mui-col-xs-4">
            <a href="###" id="qn1">
                <img id="qnImg1" class="oe-img-add"></img>
            </a>
        </li>-->
		{{each data as v i}}
	        <figure class="mui-table-view-cell mui-media mui-col-xs-4">
	            <a href="{{v.spic_src}}" data-size = "{{v.spic_width}}x{{v.spic_height}}">
	                <img class="oe-img-add" src="{{v.spic_src}}?imageMogr2/strip|imageView2/4/w/150/h/150"></img>
	            </a>
	        </figure>
        {{/each}}
	</script>
	<script>
		(function($){
			var wv;// 照片信息
			var spic_stage,rec_id;
			
			$.plusReady(function(){
				wv = plus.webview.currentWebview();
				
				spic_stage = wv.spic_stage;
				rec_id = wv.spic_rec_id;
				
				getImageListByIdAndStage(rec_id, spic_stage);
				 app.img.initPhotoSwipeFromDOM('#imgList');
			});
			
			$('.pswp').on('tap', '.pswp__button.pswp__button--delete', function(){
				var src = document.getElementsByClassName("pswp__img")[1].src.split('?')[0],
					pic_name = src.substring(src.length-13);
				
				deletePhoto(pic_name);
			})
			
			var picNum,picList1;
			var qnOp1 = {
 						browse_button : 'qn1', //必选参数,打开文件管理器的触发器 
 						uptoken : 'ArjlNfgX9rDSZl1wMrr3PEyFG7O6v7OK9N1UGilS:9NRsiB5adL07-KcxqGThr8B4Gs4=:eyJzY29wZSI6Im9ydGhzcHJvZCIsImRlYWRsaW5lIjoxNDk2ODM4NTQ2fQ==', // uptoken 是上传凭证，由其他程序生成
 						unique_names : false,              // 默认 false，key 为文件名。若开启该选项，JS-SDK 会为每个文件自动生成key（文件名）
 						domain : '7xus80.com2.z0.glb.qiniucdn.com',     // bucket 域名，下载资源时用到，**必需**
 						auto_start: true, 
 						init : {
					        'FilesAdded': function(up, files) {
					        	picNum = 0;
					        	picList1 = [];
 					            plupload.each(files, function(file) {
					            	// 文件添加进队列后,处理相关的事情
					            });
					        },
					        'BeforeUpload': function(up, file) {
					            // 每个文件上传前,处理相关的事情
					            picNum ++;
					        },
					        'UploadProgress': function(up, file) {
				                // 每个文件上传时,处理相关的事情
				                document.getElementById("qnTxt1").innerHTML = '(正在上传第' + picNum + '张)';
					        },
					        'FileUploaded': function(up, file, info) {
					            // 每个文件上传成功后,处理相关的事情
					            document.getElementById("qnTxt1").innerHTML = '(已上传' + picNum + '张)';
//					            document.getElementById("qnImg1").src = up.getOption('domain') + '/' + JSON.parse(info).key;
					            var item = {
									spic_rec_id : rec_id,
									spic_src    : JSON.parse(info).key,
									spic_stage  : spic_stage
								};
					            picList1.push(item);
					        },
					        'Error': function(up, err, errTip) {
					               //上传出错时,处理相关的事情
					        },
					        'UploadComplete': function() {
					               //队列文件处理完毕后,处理相关的事情
					               app.net.post('c_surgery_pic/create_batch',picList1,function(data){
					               		getImageListByIdAndStage(rec_id, spic_stage);
					               		plus.nativeUI.toast('上传成功');
					               });
					        },
					        'Key': function(up, file) {
					            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
					            // 该配置必须要在 unique_names: false , save_key: false 时才生效
								
					            var key = new Date().getTime();
					            // do something with key here
					            return key;
					        }
 						}
				};
				
				Qiniu.uploader(qnOp1);
			
			var getImageListByIdAndStage = function(rec_id, spic_stage){
				app.net.get('c_surgery_pic/show_list_by_stage', {spic_rec_id: rec_id, spic_stage: spic_stage}, function(data){
					if(data && data.code == 100) {
						var imgList = document.querySelector("#imgList");
	                    var tempData = data;
	                    
	                    var html = template('photo-list', tempData);
	                    imgList.innerHTML = html;
	                    
	                   
					}
				});
			}
			
			var deletePhoto = function(img_src){
				app.net.post('c_surgery_pic/delete_batch', {spic_srcs: img_src},  function(data){
//					 暂时不做处理，因为刷新页面后无法返回
					if(data && data.code === '100'){
						getImageListByIdAndStage(rec_id, spic_stage);
						$.toast('删除成功')
					}
				});
			};
			
		}(mui));
	</script>
</body>
</html>